<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="./jquery-2.1.1.min.js"></script>

</head>
<body>
<h1>Input exam score</h1>
<form name="data" id="frmScore">
<input type="text" name="examOrder" id="examOrder" 	value="1"/><br>
<input type="text" name="StudentID" id="StudentID" width="100" placeholder="Student ID..."/><br>
<input type="text" name="m1" id="m1" width="40" /><br>
<input type="text" name="m2" id="m2" width="40" /><br>
<input type="text" name="m3" id="m3" width="40" /><br>
<input type="text" name="m4" id="m4" width="40" /><br>
<input type="text" name="m5" id="m5" width="40" /><br>
<input type="text" name="m6" id="m6" width="40" /><br>
<input type="text" name="m7" id="m7" width="40" /><br>
<button type="submit">Submit</button>
</form>
<p id="result"></p>
<script type="text/javascript">
$("#frmScore").submit(function(event)
{	
	event.preventDefault();
	//alert($("#Score").val());
	request=$('#frmScore').serialize();
	$.ajax({
		type:"GET",
		url: "doUpdate.php",
		data:request,
		dataType:"json",
		success:function(obj,status,error)
		{	
			//alert(data);
			//$("#result").html(response);
			//var obj=jQuery.parseJSON(data);
			if (obj.error===undefined)
			{
				$("#examOrder").val(obj.examOrder);
				$("#result").html(obj.examOrder + obj.Name + obj.score);
				$("#StudentID").val("");
				$("#StudentID").focus();
			}
			else 
			{
				$("#result").html(obj.error);
			}
		},
		error: function(xhr, status, error) {
 			alert(xhr.responseText);
		}
	});
})
</script>
<?php

?>
</body>
</html>